<template>
    <el-container v-loading="loading">
      <el-main>
        <div class="sa-flex sa-flex-wrap sa-row-between">
          <div class="program sa-flex sa-col-top sa-row-between sa-p-16 sa-m-b-30">
            <div>
              <div class="title sa-m-b-8">直播间小程序码</div>
              <div class="desc sa-m-b-24">小程序码不带参数</div>
              <el-button type="primary" @click="saveImg">保存图片</el-button>
            </div>
            <sa-image class="" :url="state.cdnUrl" size="120"></sa-image>
          </div>
          <div class="path sa-p-16 sa-m-b-30">
            <div class="title sa-m-b-16">直播间页面路径</div>
            <div class="desc sa-m-b-24">{{ state.path }}</div>
            <el-button type="primary" @click="onCopy">复制链接</el-button>
            <div class="desc sa-m-t-40">链接是直播间原始页面路径，如需加入参数,详见<el-button class="is-link" type="primary"
                @click="onJump">使用方法</el-button></div>
          </div>
        </div>
      </el-main>
    </el-container>
  </template>
  <script setup>
  import { api } from '../../app.service';
  import handleClipboard from '@/sheep/utils/clipboard';
  import { onMounted, reactive, ref } from 'vue';
  
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const loading = ref(false);
  const state = reactive({
    cdnUrl: '', // 小程序码
    path: '', // 页面路径
    key: '', // 串流密钥
  });
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await api.mplive.room.qrcode(id);
    if (error === 0) {
      state.cdnUrl = data.cdnUrl;
      state.path = data.pagePath;
    }
    loading.value = false;
  }
  
  async function init() {
    if (props.modal.params.id) {
      await getDetail(props.modal.params.id);
    }
  }
  //复制推流地址
  function onCopy() {
    handleClipboard(state.path);
  }
  function saveImg() {
    window.open(state.cdnUrl);
  }
  
  function onJump() {
    window.open(
      'https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/industry/liveplayer/live-player-plugin.html',
    );
  }
  
  onMounted(() => {
    init();
  });
  </script>
  <style lang="scss" scoped>
  .program {
    width: 360px;
    height: 260px;
    background: #f5f5f5;
    border-radius: 4px;
  }
  
  .path {
    width: 360px;
    height: 260px;
    background: #f5f5f5;
    border-radius: 4px;
  }
  
  .title {
    font-size: 14px;
    line-height: 20px;
    color: var(--sa-subtitle);
  }
  
  .desc {
    color: var(--sa-subfont);
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
  }
  </style>
  